<template>
  <div class="login">
    <form @submit.prevent="login()">
        <h2>登录界面</h2>
        <p>
            <i class="iconfont icon-yonghuming-xianxing"></i>
            <input type="text" placeholder="请输入账号" required v-model.lazy.trim="username"/>
        </p>
        <p>
            <i class="iconfont icon-suotou"></i>
            <input type="password" placeholder="请输入密码" required v-model.lazy.trim="pwd">
        </p>
        <aside>
            <!-- 可选功能:如果勾选，在浏览器内保存上一次的登录账号和登录密码;如果没有勾选，不保存登录信息的同时还需要清除上一次记录的数据 -->
            <input type="checkbox" v-model="isRem">
            <span>记住密码</span>
        </aside>
       
            <input type="submit"  value="登录">
       
    </form>
  </div>
</template>

<script>

export default {
    name : 'LoginCom ',
    // 储存组件的数据
    data(){
        return{
            username : '', //用v-model将输入框的value值直接赋值给username变量
            pwd : '',
            isRem : false, //false 默认不勾选
        }
    },
    //  加载完成之后
    mouthed(){
        // 上一次登录时记住密码的状态
        let isremmeber = localStorage.getItem('loginRem');
        console.log(isremmeber); //字符串数据/null

        // 判断上一次是否记住密码
        this.usernaem = isremmeber=='true' ? localStorage.getItem('loginuser') : '';
        this.pwd = isremmeber =='true' ? localStorage.getItem('loginpwd') : '';
        this.isRem = isremmeber=='true' ? true : false;
  
    },
    // methods对象：储存事件函数
    methods : {
        // 登录函数
        login(){
            const user = [
                {usernaem : 'admin1' , pwd : 123456},
                {usernaem : 'admin2' , pwd : 987456},
                {usernaem : 'admin3' , pwd : 123456},
                {usernaem : 'admin4' , pwd : 987456},
                {usernaem : 'admin5' , pwd : 123456},
            ];
            // 根据输入框输入的账号密码，如果输入的数据跟上面数组中很的任意一组数组匹配，我们认为登录成功：
            // 1.记录登录状态到本地储存localStronge
            // 2.跳转到页面
            // user.forEach(item =>{
            //     if(item.usernaem == this.username && item.pwd == this.pwd){
            //         sessionStorage.setItem('islogin',this.usernaem);
            //         // 编程式导航
            //         this.$router.push('/home');
            //         // 终止循环
            //         return;

            //     }
            // })

            // 过滤函数filter    
            let result = user.filter(item =>{
                // reture出过滤条件（判断条件）
                return item.usernaem == this.username && item.pwd == this.pwd
            });               
            if (result.length > 0) {
                // 在登录成功的前提下，判断是否需要记住密码
                if (this.isRem) {
                    // 本地存储记录本次登录成功的账号和密码、本次记录密码的状态
                    localStorage.setItem('loginuser',this.username);
                    localStorage.setItem('loginuser',this.pwd);
                    localStorage.setItem('loginuser',this.isRem);
                }else{
                    // 将上一次存储到本地存储的登录账号和密码、上次记录密码的状态进行清除
                    localStorage.clear();
                }
                sessionStorage.setItem('islogin' , this.usernaem);
                // 编程式导航
                this.$router.push('/home');
            }else{
                alert('登录失败')
            }
        }
    }
}
</script>

<style scoped>
.login{
   width: 100%;
   height: 100%;
}
.login form{
      width: 500px;
      border: 1px solid gray;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      box-shadow: 0px 0px 8px rgb(136, 130, 130);
      text-align: center;
      
}
.login form h2{
    margin-top: 20px;
}
.login form p {
    width: 60%;
    height: 40px;
    margin: 10px auto;
    border: 1px solid gray;
    border-radius: 5px;
}

.login form p i{
    font-size: 23px;
    margin-right: 10px;
    line-height: 40px;
}
.login form p input[type ='text'] ,
.login form  p input[type ='password']{
    line-height: 30px;
    border: none;
    width: 80%;
}
.login form aside{
    margin: 20px 0;
    padding-right: 200px;
}
.login form aside span{
    margin-left: 20px;
}
.login form  input[type ='submit'] {
    margin-bottom: 20px;
    width: 200px;
    height: 35px;
    border-radius: 7px;
    border: none;
    background: #585757;
    color: white;
}
</style>